<template>
    <div :style="{ width: '1130px'}">
        <Echart ref="echart1Ref" :options="lineOptions"   />
        <GanttComponent :dataSource="dataSource" :options="options"/>
    </div>
</template>
<script setup lang="ts">
import { EChartsOption } from 'echarts';
import { reactive, ref, ShallowReactive, ShallowRef } from 'vue';
import { Echart } from "@/app/appcommon/components/Echart";
// import { EChartsOption } from 'echarts';
import  GanttComponent  from "@/app/appcommon/components/gantt";
const lineOptions: ShallowRef<EChartsOption> = ref({
    title: {
        text: 'analysis.monthlySales',
        left: 'center'
    },
    xAxis: {
        data: [
            'analysis.january',
            'analysis.february',
            'analysis.march',
            'analysis.april',
            'analysis.may',
            'analysis.june',
            'analysis.july',
            'analysis.august',
            'analysis.september',
            'analysis.october',
            'analysis.november',
            'analysis.december'
        ],
        boundaryGap: false,
        axisTick: {
            show: false
        }
    },
    grid: {
        left: 20,
        right: 20,
        bottom: 20,
        top: 80,
        containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
        padding: [5, 10]
    },
    yAxis: {
        axisTick: {
            show: false
        }
    },
    legend: {
        data: ['analysis.estimate', 'analysis.actual'],
        top: 50
    },
    series: [
        {
            name: 'analysis.estimate',
            smooth: true,
            type: 'line',
            data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
        },
        {
            name: 'analysis.actual',
            smooth: true,
            type: 'line',
            itemStyle: {},
            data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
        }
    ]
})


const dataSource = ref([
  {
    name: "高xx",//父级甘特图名称
    left: 0,//额外增加的列值
    third:33,//额外增加的列值
    children: [//子级甘特图
    {
      name: "测试项目1",//子级甘特图名称
      timeArray: [{ startTime: "2022-07-01", endTime: "2024-12-31" }],//子级甘特图的起止时间
      subLeft:'subLeft',//额外增加的列值
      subThird:'ai'//额外增加的列值
    },
    ],
  },
  {
    name: "陈xx",
    left: 287,
    third:333,
    avatar:'http://localhost/dev-api/profile/avatar/2025/03/06/图片1_20250306130626A001.png',
    children: [
      {
        name: "测试项目2",
        timeArray: [
          { startTime: "2025-09-05", endTime: "2025-10-04" },
          { startTime: "2025-10-01", endTime: "2025-10-31" },
        ],
        subThird:'sub1'
      },
      {
        name: "测试项目3",
        timeArray: [{ startTime: "2025-09-12", endTime: "2025-11-10" }],
        subThird:'sub2'
      },
    ],
  }
]);
const options=ref({
  parentGanttBarColor:'#67C23A',//父甘特条颜色
  childGanttBarColor:'#006C6C',//子甘特条颜色
  parentGanttBarHeight:100,//父甘特条宽度
  childGanttBarHeight:200,//子甘特条宽度
  extraColumns:[
    {
      titleName:'可用工时',//额外列标题名称
      parentKey:'left',//额外列父级的key值
      childKey:'subLeft'//额外列子级的key值
    },
    {
      titleName:'第三个标题',
      parentKey:'third',
      childKey:'subThird'
    }
  ]
})

</script>
<style scoped>
.pic {
  height: 28px;
  width: 28px;
  margin-right: 10px;
  background: #f5f7fa url('http://localhost/dev-api/profile/avatar/2025/03/06/图片1_20250306130626A001.png');
  background-size: cover;
}
</style>
<!-- ————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/qq_61402485/article/details/132679904 -->